<template>
    <el-date-picker value-format="yyyy-MM-dd HH:mm:ss" :picker-options="pickerOptions" @change="change" type="datetimerange" v-model="optiondata" clearable range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
</template>

<script>
export default {
    props: {
		is_clear:{
            type:Boolean,
            default:false
        },
	},
	watch:{
		is_clear(val){
			if(val){
				this.optiondata = []
			}
		}
	},
	data() {
		return {
			optiondata:[],
			pickerOptions: {
				shortcuts: [
					{
						text: '今日',
						onClick(picker) {
							const end = new Date();
							const start = new Date();
							start.setHours(0, 0, 0, 0);
							end.setHours(23, 59, 59, 999);
							picker.$emit('pick', [start, end]);
						}
					}, 
					{
						text: '昨日',
						onClick(picker) {
							const end = new Date();
							const start = new Date();
							start.setDate(start.getDate() - 1);
							start.setHours(0, 0, 0, 0);
							end.setDate(end.getDate() - 1);
							end.setHours(23, 59, 59, 999);
							picker.$emit('pick', [start, end]);
						}
					}, 
					{
						text: '本周',
						onClick(picker) {
							const end = new Date();
							const start = new Date();
							start.setDate(start.getDate() - start.getDay());
							start.setHours(0, 0, 0, 0);
							end.setDate(end.getDate() + (6 - end.getDay()));
							end.setHours(23, 59, 59, 999);
							picker.$emit('pick', [start, end]);
						}
					}, 
					{
						text: '上周',
						onClick(picker) {
							const end = new Date();
							const start = new Date();
							start.setDate(start.getDate() - start.getDay() - 6);
							start.setHours(0, 0, 0, 0);
							end.setDate(end.getDate() - end.getDay());
							end.setHours(23, 59, 59, 999);
							picker.$emit('pick', [start, end]);
						}
					}, 
					{
						text: '本月',
						onClick(picker) {
							const end = new Date();
							const start = new Date();
							start.setDate(1);
							start.setHours(0, 0, 0, 0);
							end.setMonth(end.getMonth() + 1);
							end.setDate(0);
							end.setHours(23, 59, 59, 999);
							picker.$emit('pick', [start, end]);
						}
					}, 
					{
						text: '上月',
						onClick(picker) {
							const end = new Date();
							const start = new Date();
							start.setMonth(start.getMonth() - 1);
							start.setDate(1);
							start.setHours(0, 0, 0, 0);
							end.setDate(0);
							end.setHours(23, 59, 59, 999);
							picker.$emit('pick', [start, end]);
						}
					}, 
					{
						text: '本季度',
						onClick(picker) {
							const end = new Date();
							const start = new Date();
							const currentMonth = end.getMonth();
							const quarterStartMonth = Math.floor(currentMonth / 3) * 3;
							start.setMonth(quarterStartMonth);
							start.setDate(1);
							start.setHours(0, 0, 0, 0);
							end.setMonth(quarterStartMonth + 3);
							end.setDate(0);
							end.setHours(23, 59, 59, 999);
							picker.$emit('pick', [start, end]);
						}
					}, 
					{
						text: '上季度',
						onClick(picker) {
							const end = new Date();
							const start = new Date();
							const currentMonth = end.getMonth();
							const quarterStartMonth = Math.floor(currentMonth / 3) * 3;
							const prevQuarterStartMonth = quarterStartMonth - 3;
							start.setMonth(prevQuarterStartMonth);
							start.setDate(1);
							start.setHours(0, 0, 0, 0);
							end.setMonth(quarterStartMonth);
							end.setDate(0);
							end.setHours(23, 59, 59, 999);
							picker.$emit('pick', [start, end]);
						}
					}, 
					{
						text: '本年度',
						onClick(picker) {
							const end = new Date();
							const start = new Date();
							start.setMonth(0);
							start.setDate(1);
							start.setHours(0, 0, 0, 0);
							end.setMonth(11);
							end.setDate(31);
							end.setHours(23, 59, 59, 999);
							picker.$emit('pick', [start, end]);
						}
					},
					{
						text: '上一年',
						onClick(picker) {
							const end = new Date();
							const start = new Date();
							start.setFullYear(start.getFullYear() - 1);
							start.setMonth(0);
							start.setDate(1);
							start.setHours(0, 0, 0, 0);
							end.setFullYear(end.getFullYear() - 1);
							end.setMonth(11);
							end.setDate(31);
							end.setHours(23, 59, 59, 999);
							picker.$emit('pick', [start, end]);
						}
					}
				]
			},
		}
	},
	methods: {
		change(val){
			this.$emit('update:is_clear', false)
			this.$emit('update:option',val)
		}
	}
}
</script>